<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests"
    />
    <title>demo</title>
    <style>
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .text-container {
        width: 100px;
        height: 40px;
        background-color: aqua;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
      }
      #iframe {
        width: 100vw;
        height: 100vh;
        border: none;
      }
    </style>
  </head>

  <body>
    <div class="text-container" id="submit">提交</div>
    <iframe
      id="iframe"
      src="https://cdn.shenchuliwu.com/prp/FJiY8/love?id3d=1Ad29Q"
      width="100vw"
      onload="iframeLoaded()"
      height="100vh"
    >
      <p>您的浏览器不支持iframe标签。</p>
    </iframe>
    <script>
      const res = document.getElementById("submit");
      const iframe = document.getElementById("iframe");
      window.parent.postMessage(
        {
          action: "updateSessionStorage",
          key: "yourKey",
          value: "yourValue",
        },
        "*"
      );
      function iframeLoaded() {
        // 这里写入iframe加载后需要执行的代码
        console.log("iframe加载完成");
        var iframe = document.getElementById("iframe");
        var iframeWindow = iframe.contentWindow;
        console.log("iframeWindow", iframeWindow);
        iframeWindow.addEventListener("message", function (event) {
          if (event.data.action === "updateSessionStorage") {
            iframeWindow.sessionStorage.setItem(
              event.data.key,
              event.data.value
            );
          }
        });
        iframeWindow.sessionStorage.setItem(
          "confessionList",
          JSON.stringify(["我", "爱", "你", "666"])
        );
      }
    </script>
  </body>
</html>
